<template>
    <div style="width: 100%;height: 100%;position: relative">
        <Spin size="large" fix v-if="AllLoading"></Spin>
        <Row>
            <i-col span="6">
                <Card style="background-color: #528ed8;">
                    <p slot="title">
                        城乡最低生活保障对象
                        <Tooltip placement="bottom-end" style="float: right">
                            <Icon type="md-information-circle"/>
                            <div slot="content">
                                <div class="fieldno" v-for="(item,index) in SecurityPersonList" :key="index">{{item.name}}<span>{{item.information}}</span>
                                </div>
                            </div>
                        </Tooltip>
                    </p>
                    <div class="content">
                        <span>24942户</span><span>32345人</span>
                    </div>
                </Card>
            </i-col>
            <i-col span="6">
                <Card style="background-color: #528ed8;">
                    <p slot="title">
                        城乡低保边缘家庭
                        <Tooltip placement="bottom-end" style="float: right">
                            <Icon type="md-information-circle"/>
                            <div slot="content">
                                <div class="fieldno" v-for="(item,index) in SecurityFamilyList" :key="index">
                                    {{item.name}}<span>{{item.information}}</span>
                                </div>

                            </div>
                        </Tooltip>
                    </p>
                    <div class="content">
                        <span>468户</span><span>444人</span>
                    </div>
                </Card>
            </i-col>
            <i-col span="6">
                <Card style="background-color: #f33e3e;">
                    <p slot="title">
                        救助对象数据预警
                    </p>
                    <div class="content">
                        2494条
                    </div>
                </Card>
            </i-col>
            <i-col span="6">
                <Card style="background-color: #FF6600;" id="to-do">
                    <p slot="title">
                        待办任务
                        <Tooltip placement="bottom-end" style="float: right">
                            <Icon type="ios-arrow-dropdown"/>
                            <div slot="content" style="width:150px;">
                                <div class="field" v-for="(item,index) in ToTasksList" :key="index">{{item.name}}<span>{{item.count}}</span>
                                </div>
                            </div>
                        </Tooltip>
                    </p>
                    <div class="content">
                        2494条
                    </div>

                </Card>
            </i-col>
        </Row>
        <br>
        <Row>
            <i-col span="24">
                <!--#####滚动区域#####-->
                <div id="scroll_div" class="scroll_div" @mouseenter="mEnter" @mouseleave="mLeave">
                    <div id="scroll_begin">
                        <ul>
                            <li v-for="(item,index) in fileList" :key="index">
                                {{item}}
                            </li>
                        </ul>
                    </div>
                    <div id="scroll_end"></div>
                </div>
                <!--#####滚动区域#####-->
            </i-col>
        </Row>
        <br>
        <div id="echartsDiv">
            <Spin size="large" fix v-if="Loading"></Spin>
            <Tabs value="name1" id="echartsTab">
                <Tab-pane label="救助对象类别统计" name="name1">
                    <bar :xAxisData="bar.xAxisData" :legendData="bar.legendData" ref="bar"
                         :seriesData="bar.seriesData" :title="bar.title" style="width: 100%;" :height="barHeight"></bar>
                </Tab-pane>
                <Tab-pane label="致贫原因统计" name="name2">
                    <radar :height="barHeight" :title="radar.title" :indicator="radar.indicator" ref="radar"
                           :legendData="radar.legendData"
                           :seriesData="radar.seriesData"></radar>
                </Tab-pane>
                <Tab-pane label="劳动能力状况统计" name="name3">
                    <pie :title="pie.title" :seriesData="pie.seriesData" style="width: 100%;" :height="barHeight"
                         ref="pie"></pie>
                </Tab-pane>
                <Tab-pane label="性别统计" name="name4">
                    <pie-doughnut :title="pieDoughnut.title" :seriesData="pieDoughnut.seriesData" style="width: 100%;"
                                  :height="barHeight" ref="pieDoughnut"></pie-doughnut>
                </Tab-pane>
                <Tab-pane label="年龄段统计" name="name5">
                    <funnel :legendData="funnel.legendData" ref="funnel"
                            :seriesData="funnel.seriesData" :title="funnel.title" style="width: 100%;"
                            :height="barHeight"></funnel>
                </Tab-pane>
            </Tabs>
            <div id="echartsSelect">
                <Select style="width:200px" clearable placeholder="请选择区划" v-model="areacode"
                        @on-change="chooseAreaCode">
                    <Option v-for="item in areaList" :value="item.azaa0001" :key="item.azaa0001">{{item.azaa0003}}
                    </Option>
                </Select>
            </div>
        </div>
    </div>
</template>
<script>
    import {Bar, Pie, Radar, PieDoughnut, Funnel} from '@/views/common/echarts'
    import {getAction, postAction} from '@/api/request'
    import {homepageJs} from './homepage'

    export default {
        mixins: [homepageJs],
        components: {
            Bar,
            Pie,
            Radar,
            PieDoughnut,
            Funnel
        },
        data() {
            return {
                Loading: false,
                AllLoading: false,
                barHeight: "500px",
                value: "",
                scroll_begin: "",
                scroll_end: "",
                scroll_div: "",
                speed: 20,
                timer: "",
                runPie: 0,
                bar: {
                    xAxisData: [],
                    seriesData: [
                        {name: '城市低保', type: 'bar', data: []},
                        {name: '农村低保', type: 'bar', data: []}
                    ],
                    legendData: ['城市低保', '农村低保'],
                    title: "区县低保对比分析"
                },
                fileList: [],
                radar: {
                    title: "致贫原因统计",
                    legendData: ['致贫原因'],
                    indicator: [],
                    seriesData: [
                        {value: [], name: '致贫原因'}]
                },
                pie: {
                    title: "劳动能力状况统计",
                    seriesData: [],
                },
                pieDoughnut: {
                    title: "性别统计",
                    seriesData: [],
                },
                funnel: {
                    seriesData: [],
                    legendData: [],
                    title: "年龄段统计",
                    max: 0
                },
                areaList: [],
                dataSource: [],
                ToTasksList: [],
                SecurityPersonList: [],
                SecurityFamilyList: [],
                areacode: "",
                url: {
                    getHelpTypeStatistical: "/api/ac/subsistence/HomePageServiceImpl/getHelpTypeStatistical",
                    getPowInforStatistical: "/api/ac/subsistence/HomePageServiceImpl/getPowInforStatistical",
                    getGenderStatistical: "/api/ac/subsistence/HomePageServiceImpl/getGenderStatistical",
                    getWorkAbilityStatistical: "/api/ac/subsistence/HomePageServiceImpl/getWorkAbilityStatistical",
                    getAgeStatistical: "/api/ac/subsistence/HomePageServiceImpl/getAgeStatistical",
                    getShuffling: "/api/ac/subsistence/HomePageServiceImpl/getShuffling",
                    getAreaList: "/api/ac/subsistence/HomePageServiceImpl/getAreaList",
                    getToTasksList: "/api/ac/subsistence/HomePageServiceImpl/getToTasksList",
                    getSecurityPersonList: "/api/ac/subsistence/HomePageServiceImpl/getSecurityPersonList",
                    getSecurityFamilyList: "/api/ac/subsistence/HomePageServiceImpl/getSecurityFamilyList"
                }
            }
        },
        methods: {
            chooseAreaCode(e) {
                this.areacode = e;
                this.getStatistical();

            },
            //获取统计图信息
            getStatistical() {
                this.Loading = true;
                var that = this;
                Promise.all([
                    new Promise((resolve, reject) => {
                        this.getBarInfor(resolve);
                    }),
                    new Promise((resolve, reject) => {
                        this.getPieInfor(resolve);
                    }),
                    new Promise((resolve, reject) => {
                        this.getRadarInfor(resolve);
                    }),
                    new Promise((resolve, reject) => {
                        this.getPieDoughnutInfor(resolve);
                    }),
                    new Promise((resolve, reject) => {
                        this.getFunnel(resolve);
                    }),
                ]).then(res => {
                    that.Loading = false;
                })
            },
            //获取其他信息
            getOtherInformation() {
                this.AllLoading = true;
                var that = this;
                Promise.all([
                    new Promise((resolve, reject) => {
                        this.getShuffling(resolve);
                    }),
                    new Promise((resolve, reject) => {
                        this.getAreaList(resolve);
                    }),
                    new Promise((resolve, reject) => {
                        this.getSecurityPersonList(resolve);
                    }),
                    new Promise((resolve, reject) => {
                        this.getSecurityFamilyList(resolve);
                    }),
                    new Promise((resolve, reject) => {
                        this.getToTasksList(resolve);
                    }),
                ]).then(res => {
                    that.AllLoading = false;
                })
            }

        },
        mounted() {
            this.getOtherInformation();
            this.getStatistical();
        }
    }
</script>
<style scoped>
    .content {
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        color: #000;
        margin-top: 4px;
        margin-bottom: 0;
        font-size: 20px;
        line-height: 38px;
        height: 38px;
        color: white;
    }

    .field:hover {
        border-bottom: #2b85e4;
        color: #2b85e4;
        cursor: pointer;
    }

    .fieldno {
        line-height: 30px;
    }

    .field {
        line-height: 30px;
    }

    .field span {
        margin-left: 15px;
    }

    #to-do .ivu-poptip-popper {
        left: -34px;
    }

    /deep/ .ivu-card-head p {
        color: white;
    }

    /deep/ .ivu-card-head {
        text-align: center;
    }

    /deep/ .ivu-card-body {
        text-align: center;
    }

    .content span {
        padding-left: 10px;
        padding-right: 10px;
    }

    #scroll_div {
        width: 100%;
        height: 50px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        background: #ffffff;
        /*border: 1px solid #999;*/
    }

    #scroll_div li {
        color: #4d5669;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        background: url('./img/star.png') no-repeat;
        background-size: 20px 20px;
        background-position: 5px 5px;
        padding-left: 40px;
        display: inline-block;
        margin-left: 100px;
    }

    #scroll_div li:hover {
        border-bottom: #f33e3e;
        color: #f33e3e;
        cursor: pointer;
    }

    #echartsDiv {
        position: relative;
        width: 100%;
    }

    #echartsSelect {
        position: absolute;
        top: 0;
        right: 0;
    }

    #echartsTab {
        top: 5px;
        position: relative;
    }

</style>
